<template>
  <van-field :label="label" :required="required" :rules="rules">
    <template #input>
      <van-switch
        :value="value"
        :size="size"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
        :disabled="disabled"
        @input="onChange"
      />
    </template>
  </van-field>
</template>

<script>
export default {
  name: 'fieldSwitch',
  props: {
    label: {
      type: String
    },
    value: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: '24px'
    },
    activeColor: {
      type: String,
      default: '#1989fa'
    },
    inactiveColor: {
      type: String,
      default: '#E8E8E8'
    },
    required: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dirty: false
    }
  },
  methods: {
    onChange (val) {
      this.$emit('input', val);
      this.$emit('change', val);
      this.dirty = true;
    },
    setDirty (dirty) {
      this.dirty = dirty;
    },
    getDirty () {
      return this.dirty;
    }
  }
}
</script>

<style>
</style>
